<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>seedforweb.cn</title>
    <script src="js/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="js/showdown.min.js"></script>
    <script src="js/highlight.min.js"></script>
    <link href="css/aritlce_editor.css" rel="stylesheet">
    <link href="css/GitHub2.css" rel="stylesheet">
    <link href="css/hybrid.min.css" rel="stylesheet">
    <!-- <link href="css/table-style.css" rel="stylesheet"> -->
</head>
<style>

</style>
<body style="padding-top: 0px">
    <div class="editor_header" >
        SeedForweb.cn 文章编辑
    </div>


    <div id="article_editor">
        <input id="art_title" placeholder="文章标题：那是梦开始的地方" />
        <div id="albums">
            <ul id="chooseAlbums" class="inline-block">
            </ul>
            <input id="choice_albums" placeholder="在这里选择所属专辑">
        </div>

        <div >
            <ul id="albumList">

            </ul>
        </div>

        <div id="tags" >
            <ul id="choiced_tag">
            </ul>
            <input id="tag_input" placeholder="在这里添加或选择标签">
        </div>


        <div id="tagDataList" data="" >
        </div>
        <div id="addTagButton">
            <a class="data-li" href="javascript:0;">添加标签..</a>
        </div>

        <div id="editor">
            <div id="e_head">
                <a id="openImgUpWin" class="editor_icon" href="javascript:0;">上传图片</a>
            </div>
            <div id="editor_body">
                <div id="e_content">
                    <textarea id="e_textarea" spellcheck="false"  onkeyup="compile()" placeholder="在这里编写内容"></textarea>
                </div>
                <div id="editor_vertical_wall"></div>
                <div id="preview"></div>

            </div>
        </div>
        <!-- hidden window-->
        <div id="hideWindow" style="display: none">
            <div class="win_background transparent_class"></div>
            <div class="window_panel">
                <div class="window">
                    <div class="win_head">
                        <span  class="win_title">创建标签</span>
                        <a id="closeAddTagWin" class="win_close" href="javascript:void(0);">×</a>
                    </div>
                    <div class="win_body">
                        <input id="tag_add_name" placeholder="请输入标签名称"/>

                        <textarea id="tag_add_desc" placeholder="请输入标签描述"></textarea>

                        <button id="tag_add_confirm" name="确定">确 定</button>
                        <button id="tag_add_cancel" name="取消" value="取消">取 消</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- hidden window-->
        <div id="uploadImg" style="display: none">
            <div class="win_background transparent_class"></div>
            <div class="window_panel">
                <div  class="little_window">
                    <div class="win_head">
                        <span class="win_title">上传图片</span>
                        <a id="close_up_img_win" class="win_close" href="javascript:void(0);">×</a>
                    </div>
                    <div class="win_body">
                        <input id="img_dia" type="file" name="img"/>
                        <button id="upload_img" name="确定">确 定</button>
                        <button id="cancel_upload" name="取消" value="取消">取 消</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>

<script>
    //编辑器大小调整js
    var initMethod = function(){
        $("#editor_body").height(window.innerHeight-100);
        var editorBodyHeight = $("#editor_body").height();
        var editorBodyWidth = $("#editor_body").width();
        var editorWidth = editorBodyWidth/2-15;
        var verticalWallWidth = 15;
        var previewWidth = editorBodyWidth - verticalWallWidth - editorWidth-4;
        $("#e_textarea").height(editorBodyHeight);
        $("#e_textarea").width(editorWidth);
        $("#editor_vertical_wall").height(editorBodyHeight);
        $("#editor_vertical_wall").width(verticalWallWidth);
        $("#preview").height(editorBodyHeight);
        $("#preview").width(previewWidth);
//        $("#data").attr("");



    }
    initMethod();

    $(window).resize( function(){
        initMethod();
    });


    //md装换js

    var formatPreCode = function(){
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    }

    function compile(){
        var text = $("#e_textarea").val();
        var converter = new showdown.Converter();
        showdown.setOption("tables",true)
        var html = converter.makeHtml(text);
        $("#preview").html(html);
        formatPreCode();
    }

    //textArea支持tab
    $("textarea").on('keydown',function(e){
        if(e.keyCode == 9){
            e.preventDefault();
            var indent = '    ';
            var start = this.selectionStart;
            var end = this.selectionEnd;
            var selected = window.getSelection().toString();
            selected = indent + selected.replace(/\n/g,'\n'+indent);
            this.value = this.value.substring(0,start) + selected + this.value.substring(end);
            this.setSelectionRange(start+indent.length,start+selected.length);
        }
    })

</script>
<script src="js/article_editor.js"></script>
<script>
    $(document).ready(
            alert("hehe")
    );

</script>
</html>